<!-- 审批督办管理 -->
<template>
    <h2>审批督办管理</h2>
    <div style="display: flex;">
      <!-- 下拉选择 -->
      <el-select v-model="value1" filterable placeholder="所属市区" style="margin-left: 10px" @change="change">
        <el-option v-for="item in tableopition1" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select  v-model="value2" filterable placeholder="审批状态" style="margin-left: 20px" @change="change">
        <el-option v-for="item in tableopition2" :key="item" :label="item" :value="item" />
      </el-select>
      <el-select  v-model="value3" filterable placeholder="处理单位" style="margin-left: 20px" @change="change">
        <el-option v-for="item in tableopition3" :key="item" :label="item" :value="item"/>
      </el-select>
      <el-select v-model="value4" filterable  placeholder="审批类型" style="margin-left: 20px" @change="change">
        <el-option v-for="item in tableopition4" :key="item" :label="item"  :value="item" />
      </el-select>
      <el-select v-model="value5" filterable  placeholder="时限" style="margin-left: 10px;margin-right: 5%;" @change="change">
        <el-option v-for="item in tableopition5" :key="item" :label="item"  :value="item" />
      </el-select>
      <div class="demo-date-picker" >
      <div class="block">
     <!--  <span class="demonstration" style="color: rgb(168,191,208);"> 选择审批日期:&nbsp; &nbsp; &nbsp; </span> -->
      <el-date-picker
        v-model="datavalue"
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
        :size="size"
        @change="change"
      />
      </div>
      </div>

    </div>
    <div style="margin-top: 30px; margin-left: 10px">
      <!-- 搜索栏 -->
      <div>
        <el-input v-model="input" placeholder="" style="width: 30%" />
        <el-button @click="seacrhs"  round   style="border-radius: 0;background-color: rgb(22, 155, 213);color: white;">搜索</el-button>
      </div>
      <div id="maxbox" ref="myRef">
        <div >
          <span @click="clickplay()">
            自定义列表
          </span>
          <div class="selectbox">
            <input type="checkbox" checked disabled />
            <label>审批主题</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked disabled />
            <label>企业名称</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked disabled />
            <label>审批状态</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked disabled/>
            <label>督办方式</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked disabled/>
            <label>督办状态</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked disabled />
            <label>超时状态</label>
          </div>
          <div class="selectbox">
            <input type="checkbox" checked id="splx"/>
            <label>审批类型</label>
          </div>
          <div class="selectbox">
            <input type="checkbox"  checked id="ssqs"/>
            <label>所属市区</label>
          </div>
          <div class="selectbox">
            <input type="checkbox"  checked id="spdw"/>
            <label>审批单位</label>
          </div>
          <div class="selectbox">
            <input type="checkbox"  checked id="tjsj"/>
            <label>提交时间</label>
          </div>

        </div>
      </div>
    </div>
  
    <div id="maxbox3" style="margin-top:20px;position: relative;">
      <!-- 表单 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed="left" prop="id" label="序号" width="80" />
        <el-table-column prop="approvalSubject" label="审批主题" width="320" />
        <el-table-column prop="name" label="企业名称" width="160" />
        <el-table-column prop="approvalStatus" label="审批状态" width="160" />
        <el-table-column prop="timeoutStatus" label="超时状态" width="160" />
        <el-table-column prop="region" label="所属市区" v-if="s" width="160" />
        <el-table-column prop="approvalUnit" label="审批单位" v-if="w" width="160" />
        <el-table-column prop="submissionTime" label="提交时间" v-if="j" width="180" />
        <el-table-column prop="approvalType" label="审批类型" v-if="x" width="160" />
        <el-table-column prop="supervisionMethod" label="督办方式" width="160" /><!-- 督办方式 -->
        <el-table-column prop="supervisionStatus" label="督办状态" width="160" />
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope)">查看</el-button>
            <el-button link type="primary" size="small" @click="superintendent(scope,$event)">督办</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="border: 1px solid rgb(22,155,213); background-color: azure; width: 120px;height: 117  px;position: absolute;right: 0px;z-index: 999;display: none;" ref="block" >

          <div class="mb-2 flex items-center text-sm">
                 <el-radio-group v-model="radio1" class="ml-4">
                        <el-radio label="系统消息" size="large">系统消息</el-radio>
                         <el-radio label="短信" size="large">短信</el-radio>
                  </el-radio-group>
         </div>
          <el-button type="primary" style="border-radius: 0;width: 120px;" @click=messages>确定</el-button>
      </div>  
    </div>
    <!-- 分页 -->
    <div class="page" style="display: flex;justify-content: center;">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted,onUpdated,watch,watchEffect,reactive} from "vue";
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  const router=useRouter()
  /* value1 2 对应v-modole */
  const value1 = ref("");
  const value2 = ref("");
  const value3 = ref("");
  const value4 = ref("");
  const value5 = ref("");
  const input = ref("");
  
//=====以下3个const是关于日期的
const size = ref<'default' | 'large' | 'small'>('default')
const datavalue= ref('') // 日期的ref
const shortcuts = [
  {
    text: '周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '季',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
  
  /* 复选框 */
        const myRef = ref();
        let w:any=ref("true");
        let j:any=ref("true");
        let s:any=ref("true");
        let x:any=ref("true");
  //自定义列表
  const clickplay = function () {
    if (myRef.value.style.height == '36px' || myRef.value.style.height=='') {
      myRef.value.style.height = "353px";
    } else if(myRef.value.style.height = "353px") {
      myRef.value.style.height = "36px";
    }
      const splx:any=document.getElementById("splx");
      x.value=splx.checked;
      const ssqs:any=document.getElementById("ssqs");
      s.value=ssqs.checked;
      const spdw:any=document.getElementById("spdw");
      w.value=spdw.checked;
      const tjsj:any=document.getElementById("tjsj");
      j.value=tjsj.checked;
  };
  //查看详细  √
  let id2:any
  const handleClick = (scope:any) => {
    let id2=scope.row.id
    router.push({path:"/seeApprovalSupervision",query:{id:id2}})
    console.log(id2);
    
  };
 // 点击元素与浏览器的位子，相当于给定位了
  let pages:any=reactive({
     x:null,
     y:null
  })
  const  block = ref()

  const superintendent =(scope:any,$event:any)=>{
    block.value.style.display='block';
  //  block.value.style.top="140px"
    pages.x=$event.clientX,
    pages.y=$event.clientY,
    block.value.style.left= -200 + pages.x +'px'
    block.value.style.top=  pages.y -220 +'px'
    id2=scope.row.id;// 这是点击督报的id
    console.log(id2);
  }
  // 选择督办方式
const radio1 = ref('1')
 const messages=(scope:any)=>{
  console.log(radio1.value);
  console.log(id2);
    //  console.log(id2);//id2提交督办的id 
            axios({
                  method: 'post',
                  url: 'http://172.16.123.189:8080/approval_checklist/doApprovalSupervision',
                  params: {
                    id:id2,
                    method:radio1.value   
                  }
                }).then((res:any) => {
                   if(res.status==200){
                    alert('提交成功')
                    block.value.style.display='none';
                   }
                })
     
 }


 // 时间戳转时间
 const aaa = (aa: any) => {
 var date = new Date(aa); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
 var Y = date.getFullYear() + '/';
 var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
 var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
 var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
 var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
 var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
 return Y + M + D + h + m + s;
 }
 //--------------------------国标时间转日期
const timestampToTime=(timestamp:any)=>{
      var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      var D = date.getDate() + ' ';
      var h = (date.getHours() < 10 ? '0'+(date.getHours()) : date.getHours()) + ':' ;
      var m = (date.getMinutes() < 10 ? '0'+(date.getMinutes()) : date.getMinutes()) + ':' ;
      var s = (date.getSeconds() < 10 ? '0'+(date.getSeconds()) : date.getSeconds());
      return Y+M+D+h+m+s;
}
 const tableopition1:any=ref([])  //动态下拉框
const tableopition2:any=ref([])
const tableopition3:any=ref([])
const tableopition4:any=ref([])
const tableopition5:any=ref([])
const tableData:any= ref([])//主数据
// 下拉框搜索
const change=(()=>{
  let time= timestampToTime(datavalue.value[0])//开始日期
  let time2=timestampToTime(datavalue.value[1])//
  console.log(time,'+++',time2);
  
     axios({    
       method: 'post',
       url: 'http://172.16.123.189:8080/approval_checklist/findApprovalSupervisionByCondition',
       params: {
       approvalStatus:value2.value, //状态
       approvalType:value4.value,  //类型
       region:value1.value,   //所属城市
       approvalUnit:value3.value,  //审批单位 
       starttime:time,
       endtime:time2,
       page:1,
       limit:10,  
       }
       }).then((res:any) => {
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
        }
        })
 })
//输入框搜索
const seacrhs=function(){ 
  console.log(input.value);
     axios({    
       method: 'post',
       url: 'http://172.16.123.189:8080/approval_checklist/selectDuBanname',
       params: {
        name:input.value,
        currentPage:1,
        pageSize:10    
       }
       }).then((res:any) => {
        console.log(res);
        tableData.value=res.data.data
        for(let i=0;i<tableData.value.length;i++){
          tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
          tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
        }
      })
    }  
  //onMounted 页面加载前，发起请求渲染页面数据
  onMounted(()=>{
                 axios({
                  method: 'post',
                  url: 'http://1.14.73.59:8080/approval_checklist/findApprovalSupervision',
                  params: {
                    currentPage:1,
                    pageSize:5    
                  }
                }).then((res:any) => {
                  console.log(res);
                  
                tableData.value=res.data.data
                //这个循环是转换时间格式
                  for(let i=0;i<tableData.value.length;i++){
                    tableData.value[i].approvalTime=aaa(tableData.value[0].approvalTime)
                    tableData.value[i].submissionTime=aaa(tableData.value[0].submissionTime)
                    tableopition1.value.push(tableData.value[i].region) //所属市区
                    tableopition2.value.push(tableData.value[i].approvalStatus)
                    tableopition3.value.push(tableData.value[i].approvalUnit)
                    tableopition4.value.push(tableData.value[i].approvalType)
                    tableopition5.value.push(tableData.value[i].timeoutStatus)
                     removeDuplicate(tableopition1.value) 
                     removeDuplicate(tableopition2.value) //去重，上面const的值都已经去重了
                     removeDuplicate(tableopition3.value)
                     removeDuplicate(tableopition4.value)
                     removeDuplicate(tableopition5.value)
                     function removeDuplicate(arr:any) {
                      let len = arr.length
                     for (let i = 0; i < len; i++) {
                     for (let j = i + 1; j < len; j++) {
                        if (arr[i] === arr[j]) {
                         arr.splice(j, 1)
                           len-- // 减少循环次数提高性能
                           j-- // 保证j的值自加后不变
                        }
                       }
                      }
                       return arr
                 }
                  }
              })
          })
  
    
  </script>
  
  <style>
  #maxbox {
    position: absolute;
    width: 124px;
    height: 36px;
    right: 600px;
    top: 130px;
    z-index: 999;
    text-align: center;
    line-height: 40px;
    background-color: rgb(22, 155, 213);
    overflow: hidden;
    transition: all 0.2s linear;
    border-radius: 3px;
  }
  #maxbox div {
    width: 123px;
    color: white;
    font-size: 14px;
  }
  #maxbox div div{
    height: 30px;
    width: 122px;
  }
  #maxbox2 {
    width: 120px;
    height: 36px;
    background-color: rgb(22, 155, 213);
    text-align: center;
    line-height: 36px;
    position: absolute;
    right: 400px;
    top: 130px;
  }
  
  /* #clickbox {
    width: 120px;
    height: 36px;
    background-color: rgb(22, 155, 213);
    text-align: center;
    line-height: 36px;
  }
  #checkbox {
    overflow: hidden;
    height: 0px;
  } */
  .selectbox {
    width: 120px;
    height: 20px;
    border: 1px solid rgb(104, 100, 100);
    background-color: rgb(124, 122, 122);
    font-size: 14px;
  }
  .selectbox input{
    margin-left: -10px;
  }
  .selectbox label{
    color:white;
    font-size: 6px;
  }
  .el-radio-group{
    margin-left: 15px;
    margin-top: 5px;
  }
  </style>